<template>
  <div id="course">
    <nav class="navbar navbar-default navbar-fixed-top header">
      <div class="container">
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#header-navbar-collapse"
            aria-expanded="false"
          >
            <span class="sr-only">实验楼</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="/static/img/logo_03.png" />
          </a>
        </div>
        <div class="collapse navbar-collapse" id="header-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <router-link class="dropdown-toggle" data-toggle="dropdown" to="/course">
                课程
                <span class="caret"></span>
              </router-link>
              <ul class="dropdown-menu">
                <li>
                  <a class href="courses/index.html">全部课程</a>
                </li>
                <li>
                  <a class href="courses/index.html?status=preview">即将上线</a>
                </li>
                <li>
                  <a class href="developer/index.html">开发者</a>
                </li>
              </ul>
            </li>
            <li class>
              <router-link to="/paths">路径</router-link>
            </li>
            <!-- <li class="">
                    <a href="questions/index.html">讨论区</a>
            </li>-->
            <li class="bootcamp new-nav logo-1111">
              <router-link to="/seckill">秒杀</router-link>
            </li>

            <li class="new-nav logo-1111">
              <router-link to="/Member">会员</router-link>
            </li>
          </ul>
          <div class="navbar-right btns" v-if="username">
            <router-link to="/Usercenter">
              <button class="navbar-btn btn btn-info sign-up">{{username}}</button>
            </router-link>
            <button class="navbar-btn btn btn-info sign-in" @click="Logout">退出</button>
          </div>
          <div class="navbar-right btns" v-else>
            <a
              class="btn btn-default navbar-btn sign-in"
              data-sign="signin"
              href="#sign-modal"
              data-toggle="modal"
            >登录</a>
            <a
              class="btn btn-default navbar-btn sign-up"
              data-sign="signup"
              href="#sign-modal"
              data-toggle="modal"
            >注册</a>
          </div>
          <form class="navbar-form navbar-right" method="get" role="search">
            <div class="form-group">
              <input
                type="text"
                class="form-control"
                v-model="key"
                @keyup.enter="redisearchs"
                autocomplete="off"
                placeholder="搜索 课程/问答"
              />
            </div>
          </form>
        </div>
      </div>
    </nav>
    <div class="container layout layout-margin-top">
      <div class="row">
        <div class="col-md-9 layout-body">
          <div class="content">
            <div class="row course-cates">
              <div class="col-md-1 course-cates-title">类别：</div>

              <div class="col-md-11 course-cates-content">
                <a v-bind:class="{'active':tabid==-1}" @click="all1">全部</a>
                <a
                  v-for="j in levels"
                  @click="leve(j.id)"
                  v-bind:class="{'active':tabid==j.id}"
                  :key="j.id"
                >{{j.level | levelname2 }}</a>
              </div>
            </div>
            <div class="row course-cates">
              <div class="col-md-1 course-cates-title">标签：</div>
              <div class="col-md-11 course-cates-content">
                <a v-bind:class="{'active':tbid==-1}" @click="all2">全部</a>
                <a
                  class
                  v-for="i in tag"
                  @click="tage(i.id)"
                  v-bind:class="{'active':tbid==i.id}"
                  :key="i.id"
                >{{i.name}}</a>
              </div>
            </div>
          </div>
          <div class="content position-relative">
            <ul class="nav nav-tabs" role="tablist">
              <li class="active">
                <a :v-model="online" @click="line">已上线</a>
              </li>
              <li class>
                <a :v-model="online" @click="nline">即将上线</a>
              </li>
            </ul>
            <div class="clearfix"></div>
            <div class="courses-sort">
              <a :v-model="news" @click="znew">最新</a>
              /
              <a :v-model="news" @click="nnew">最热</a>
            </div>
            <div class="search-result"></div>
            <div class="row">
              <transition name="fade">
                <Loading v-if="isLoading" />
              </transition>
              <div class="col-md-4 col-sm-6 course" v-for=" c in course" :key="c.id">
                <router-link class="course-box" :to="{path:'/showcourse',query:{id:c.id}}">
                  <!-- <a  href="show.html"> -->
                  <div class="sign-box">
                    <i
                      class="fa fa-star-o course-follow pull-right"
                      data-follow-url="/courses/708/follow"
                      data-unfollow-url="/courses/708/unfollow"
                      style="display:none"
                    ></i>
                  </div>
                  <div class="course-img">
                    <img alt :src="c.pic" />
                  </div>

                  <div class="course-body">
                    <span
                      class="course-title"
                      data-toggle="tooltip"
                      data-placement="bottom"
                      title="Python 3 实现 Markdown 解析器"
                    >{{c.title}}</span>
                  </div>
                  <div class="course-footer">
                    <span class="course-per-num pull-left">
                      <i class="fa fa-users"></i>
                      {{c.learn}}
                    </span>
                    <span class="course-money pull-right">{{ c.member | levelname }}</span>
                  </div>
                  <!-- </a> -->
                </router-link>
              </div>
            </div>
          </div>
        </div>
        <hotpath></hotpath>
      </div>
    </div>

    <footer1></footer1>
  </div>
</template>
<script>
// import header from "./header";
import footer from "./footer";
import hotpath from "./hotpath";
import Loading from "./Loading";

export default {
  name: "course",
  components: {
    // header1: header,
    footer1: footer,
    hotpath: hotpath,
    Loading: Loading
  },
  data() {
    return {
      tag: "",
      isLoading: true,
      key: "",
      lev: -1,
      tid: -1,
      tbid: -1,
      levels: "",
      course: "",
      online: 0,
      tabid: -1,
      news: -1,
      user_id: localStorage.getItem("user_id"),
      username: localStorage.getItem("username")
      // page: 1, // 当前页数
      // page_size: 10, // 每页数量
    };
  },
  methods: {
    redisearchs: function() {
      if (this.key != "") {
        this.isLoading = true;
        this.axios({
          url: "/api/redis_search/?key=" + this.key,
          method: "get"
        }).then(res => {
          if (res.data.code == 200) {
            // console.log(res.data.course);
            this.isLoading = false;

            this.course = res.data.course;
            // window.location.href =
            //   "http://localhost:8080/#/course?key=" + this.key;
          } else {
            alert("连接失败");
          }
        });
      } else {
        // window.location.href = "http://localhost:8080/#/course";
        this.isLoading = true;
        this.getCourse();
      }
    },
    all1: function() {
      this.lev = -1;
      this.tabid = -1;
      // console.log(this.lev);
      this.isLoading = true;
      this.getCourse();
    },
    getUsernames() {
      this.username = localStorage.getItem("username");
    },
    Logout() {
      localStorage.removeItem("username");
      localStorage.removeItem("token");
      localStorage.removeItem("user_id");
      alert("退出成功");
      // console.log(this.$route.path)
      if(this.$route.path=='http://localhost:8080/#/'){
        window.location.reload();
      }else{
      this.$router.push({ path: "/" });

      } 
      
    },
    all2: function() {
      this.tid = -1;
      this.tbid = -1;
      // console.log(this.tid);
      this.isLoading = true;
      this.getCourse();
    },
    line: function() {
      this.online = 0;
      // console.log(this.online);
      this.isLoading = true;
      this.getCourse();
    },
    nline: function() {
      this.online = 1;
      // console.log(this.online);
      this.isLoading = true;
      this.getCourse();
    },
    znew: function() {
      this.news = 1;
      // console.log(this.news);
      this.isLoading = true;
      this.getCourse();
    },
    nnew: function() {
      this.news = 0;
      // console.log(this.news);
      this.isLoading = true;
      this.getCourse();
    },
    leve: function(jid) {
      this.lev = jid;
      this.tabid = jid;
      // console.log(this.lev);
      this.isLoading = true;
      this.getCourse();
    },
    tage: function(tids) {
      this.tid = tids;
      this.tbid = tids;
      // console.log(this.tid);
      this.isLoading = true;
      this.getCourse();
    },
    getCourse: function() {
      // console.log(222);
      this.$store.commit("showLoading");
      this.axios({
        url:
          "/api/coursetag/?tag=" +
          this.tid +
          "&member=" +
          this.lev +
          "&online=" +
          this.online +
          "&news=" +
          this.news,
        method: "get"
      }).then(res => {
        if (res.data.code == 200) {
          // this.$store.commit('hideLoading')
          this.isLoading = false;
          // console.log("1111");
          this.course = res.data.course;
        }
      });
    },
    // 请求商品数据
    get_skus: function() {
      this.axios
        .post("/api/vue/categories/", {
          params: {
            page: this.page,
            cate_id: this.$route.params.id,
            page_size: this.page_size,
            ordering: this.orderings
          },
          responseType: "json"
        })
        .then(response => {
          // console.log(response);
          this.count = response.data.count;
          this.skus = response.data.skus;
        })
        .catch(error => {
          // console.log(error.response);
        });
    }
  },
  mounted() {
    if (this.$route.query.key) {
      this.axios({
        url: "/api/redis_search/?key=" + this.$route.query.key,
        method: "get"
      }).then(res => {
        if (res.data.code == 200) {
          // console.log(res.data.course);
          this.course = res.data.course;
        } else {
          alert("连接失败");
        }
      });
    } else {
      this.getCourse();
    }
    this.getUsernames();
    this.axios({
      url: "/api/sadmin/addlevel/",
      method: "get"
    }).then(res => {
      if (res.data.code == 200) {
        this.levels = res.data.data;
      }
    }),
      this.axios({
        url: "/api/sadmin/showTag/",
        method: "get"
      }).then(res => {
        if (res.data.code == 200) {
          this.tag = res.data.userlist;
        }
      });
  },
  filters: {
    levelname: function(status) {
      if (status == 54) {
        return "免费";
      } else if (status == 55) {
        return "付费";
      } else {
        return "付费";
      }
    },
    levelname2: function(status) {
      if (status == "会员") {
        return "付费";
      } else if (status == "高级会员") {
        return "";
      } else {
        return "免费";
      }
    }
  }
};
</script>
